<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            width: 800px;
            margin: auto;
            border-collapse: collapse;
        }
        th,td{
            border: 1px solid;
            text-align: center;
        }
        h3{
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <table>
            <thead>
                <tr>
                    <th><input type="checkbox" name="" id="" @click="allCk"></th>
                    <th>序号</th>
                    <th>书籍名称</th>
                    <th>出版日期</th>
                    <th>价格</th>
                    <th>购买数据</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in books">
                    <td><input type="checkbox" name="" id="" @click="ck(index)" :checked="item.flag"></td>
                    <td>{{index+1}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.time}}</td>
                    <td>￥{{item.price}}</td>
                    <td><button @click="sub(index)">-</button> <span>{{item.num}}</span> <button @click="add(index)">+</button> </td>
                    <td><button @click="goMove(index)">移出</button></td>
                </tr>
            </tbody>
            
        </table>
        <button @click="checkRemove">删除所选</button>
        <h3>总价：￥{{allPrice}}</h3>
        
    </div>

    <script src="./vue.js"></script>
    <script>
        let app=new Vue({
            el:"#app",
            data:{
                books:[
                    {
                        name:"《算法导论》",
                        time:"2012-9",
                        price:"89.00",
                        num:1,
                        flag:false
                    },
                    {
                        name:"《大数据》",
                        time:"2012-9",
                        price:"79.00",
                        num:1,
                        flag:false
                    },
                    {
                        name:"《高级程序设计》",
                        time:"2012-9",
                        price:"67.00",
                        num:1,
                        flag:false
                    },
                    {
                        name:"《成语大全》",
                        time:"2012-9",
                        price:"99.00",
                        num:1,
                        flag:false
                    }
                ]
            },
            methods:{
                // 增加
                add(index){
                    this.books[index].num++;
                },
                // 减少
                sub(index){
                    if(this.books[index].num<=1){
                        alert("数量不能小于1！");
                    }else{
                        this.books[index].num--;

                    }
                },
                // 删除
                goMove(index){
                    this.books.splice(index,1);
                    // 插入：arr.push()和arr.unshift()
                    // 删除：arr.pop()和arr.shift()
                    // 删除、插入、替换：splice()
                },
                // 选中
                ck(index){
                    this.books[index].flag=!this.books[index].flag;
                    console.log(this.books);
                },
                // 全选
                allCk(){
                    this.books.forEach(function(item){
                        item.flag=!item.flag;
                    })

                },
                // 删除所选
                checkRemove(){
                    for(let i=0;i<this.books.length;i++){
                        if(this.books[i].flag){
                            this.books.splice(i,1);
                            i--;
                        }
                    }
                }


            },
            computed:{
                allPrice(){
                    let all=0;
                    this.books.forEach(item => {
                        all+=item.price*item.num
                    });
                    return all;
                }
            }
            
        })
        console.log(app);
    </script>
</body>
</html>